<template>
	<view class="content">
		<uni-row class="demo-uni-row dark">
			<uni-col class="demo-uni-col">
				<view class="demo-uni-col dark">
					<img style="height: 128px" src="static/logo_proc.jpg" alt="" />
				</view>
			</uni-col>
			<view class="demo-uni-col ">
				<uni-data-select style="text-align: center;" :localdata="langs" v-model="lang"></uni-data-select>
			</view>
			<uni-col class="demo-uni-col">
				<uni-easyinput v-model="inVal" class="uni-mt-5" placeholder="输入" @iconClick="iconClick"
					:styles="{ borderColor: '#444', borderWidth: '2px' }" @confirm="foo" ></uni-easyinput>
			</uni-col>
			<uni-col class="demo-uni-col">
				<button type="submit" class="uni-btn uni-btn-small uni-btn-search" @tap="foo">
					<uni-icons type="search" size="24"></uni-icons>
				</button>
			</uni-col>
		</uni-row>
		<uni-row class="demo-uni-row">
			<uni-col class="demo-uni-col show-img-col" :span=24>
				<img class="show-img " src="static/01_proc.jpg" alt="" srcset="" />
			</uni-col>
		</uni-row>
		<uni-row class="demo-uni-row">
			<uni-col class="demo-uni-col show-img-col">
				<img class="show-img " src="static/02_proc.jpg" alt="" srcset="" />
			</uni-col>
		</uni-row>
		<uni-row class="demo-uni-row">
			<uni-col class="demo-uni-col show-img-col">
				<img class="show-img " src="static/03_proc.jpg" alt="" srcset="" />
			</uni-col>
		</uni-row>
		<uni-row class="demo-uni-row">
		<uni-col class="demo-uni-col">
			<a href="#/pages/contact" class="contact"> 联系我们 </a>
		</uni-col>
		</uni-row>
	</view>
</template>

<script>
	import {
		uniIcons
	} from "@dcloudio/uni-ui";
	import uniEasyinput from "components/uni-easyinput/uni-easyinput.vue";
	import uniDataSelect from "components/uni-data-select/uni-data-select.vue";
	export default {
		components: {
			uniEasyinput,
			uniDataSelect,
			uniIcons,
		},
		data() {
			return {
				lang: 1,
				inVal: ""
			};
		},
		methods: {
			foo: function() {
				console.log(this.inVal);
				uni.navigateTo({
					url: 'step1?lang=' + this.lang + '&title=' + this.inVal
				});
			},
		},
		onLoad() {
			this.loadData()
		},
	};
</script>

<style>
	@import "./index.css";
	.demo-uni-row {
		display: flex;
		align-items: center;
	}

	.show-img-col {
		width: 90%;
		margin: 0 auto;
		/* 水平居中 */
		overflow: hidden;
		/* 隐藏超出部分 */
		position: relative;
		max-width: 1024px;
		/* 图片宽度占满容器 */
	}

	img.show-img {
		height: 300px;
	}
	.uni-select {
		text-align: center;
	}
</style>